<template>
  <div class="app-container">
  <el-row :gutter="20">
    <el-page-header @back="goBack" title="返回"  style=" margin-bottom:20px;margin-left:10px;margin-top:5px; color:cornflowerblue;"></el-page-header>
    <el-divider content-position="left"></el-divider>
    <el-col  :span="12">
        <el-form :model="editSpecKey" :rules="rules" ref="editForm">
            <el-form-item label="名称" label-width="80px" prop="name" >
                <el-input disabled v-model="editSpecKey.name" autocomplete="off" placeholder="请输入规格名称"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="80px" prop="description">
                <el-input v-model="editSpecKey.description" autocomplete="off" placeholder="请描述规格"></el-input>
            </el-form-item>
            <el-form-item label="单位" label-width="80px" prop="unit">
                <el-input v-model="editSpecKey.unit" autocomplete="off" placeholder="请输入规格单位"></el-input>
            </el-form-item>
            <el-form-item label="是否标准" label-width="80px" prop="standard">
                <el-switch v-model="editSpecKey.standard"></el-switch>
            </el-form-item>
        </el-form>
            <el-button  style=" margin-left:80px" @click="resetting">重置</el-button>
            <el-button type="primary" @click="sureEdit">保存</el-button>
    </el-col>
        <el-col  :span="12">
            <span>规格值列表</span>
            <el-button icon="el-icon-circle-plus"  style=" margin-left:10px;" @click="showAddValueDialog" type="primary" size="small">添加规格值</el-button>

 
        <el-table
        :data="tableData"
        border
         style="width: 100%; margin-top: 8px; line-height: 50px;">
             <el-table-column
                prop="id"
                label="ID"
                width="50">
            </el-table-column>
            <el-table-column
                prop="value"
                label="规格值名称"
               >
            </el-table-column>
            <el-table-column
                prop="extend"
                label="拓展"
               >
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
          <el-button  @click="editValue(scope.row.id)" type="info" icon="el-icon-star-off" size="mini">编辑</el-button>
          <el-button   @click="delUser(scope.row.id)" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
  </el-table-column>
</el-table>
<edit-spec-value @refred="refred" ref="editValueDialog"></edit-spec-value>
<add-spec-value @refred="refred" ref="addValueDialog"></add-spec-value>
<el-pagination
style="margin-top: 12px;"
  background
  layout="prev, pager, next"
  :page-size="5"
  :current-page="current"
   @current-change="goto"
  :total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</template>

<script>
import EditSpecValue from '@/views/spec-value/EditSpecValue.vue'
import AddSpecValue from '@/views/spec-value/AddSpecValue.vue'
// import axios from 'axios'
import http from '@/utils/request.js'
export default {
    components: {
    EditSpecValue,
    AddSpecValue
},
    data() {
        return {
            permission: [],
            tableData: [],

            specKeyId: '',

            total:0,
            current:1,
            current2: '',
            // editUserDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
            editSpecKey: {
                name:'',
                description:'',
                unit: '',
                standard:1
            },
            // 定义校验规则
            rules: {
                name: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: false, trigger: 'blur' }
                ],
                description: [
                    { required: false, trigger: 'blur' }
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    // { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                    //     message: '邮件不符合规则', trigger: 'blur'}
                ],
                unit: [
                    { required: false, trigger: 'blur' },
                ]
            }
        }
    },
    created(){
        // this.getSpecKeys()
        this.current2 = this.$route.query.current
        // this.current = this.$route.query.current

        
    },
    mounted(){

         this.permission = this.$route.meta.permission
         this.specKeyId = this.$cookies.get('specKeyId')
        //  this.current2 = this.$route.query.current
        this.goto()
        this.getById()

  },
    methods: {
        goto(val=1, id){
            
          http.get(`spe/list/?page=${val}&id=${this.specKeyId}`).then(res=>{
             this.tableData  =  res.data
            this.total=res.total
             this.current=res.current
     })
    },
    goBack(){
        this.$router.push({
        path: './spec-key',
        query: {current:this.current2 }
        })
        console.log(this.current2)
    },
    
        // 根据id查询，然后回显数据
        getById(id) {
            http.get(`spec-key/${this.specKeyId}`).then(res => {
                // res.data 就是用户数据
                this.editSpecKey = res
            }) 
            this.idAgain=id;

        },
        async sureEdit() {
           
            try {
                await this.$refs.editForm.validate()
                await http.put(`spec-key`, this.editSpecKey)
                this.$message({ message: '编辑成功', type: 'success', duration: 1000})
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        },
        showAddValueDialog() {
            this.$refs.addValueDialog.addValueDialogVisible = true
        },
        async delUser(id) {
    try {
      await this.$confirm('你确定要删除这条数据吗?', '警告', {
        confirmButtonText: 'yes',
        cancelButtonText: 'no',
        closeOnClickModal: false,
        type: 'success'
      })
     
      await http.delete(`spe/${id}`)



      // 删除成功的提示消息
      this.$message({ message: '删除成功', type: 'success', duration: 1000})
      this.refred()
    }catch(err) { // 
      console.log(err)
    }
  }, 
            editValue(id) {
            this.$refs.editValueDialog.getById(id)
            
            this.$refs.editValueDialog.editValueDialogVisible = true
        },

        refred() {
            this.goto()
  },

  resetting() {
           
         
            // 重置表单
           this.getById()


        },
        Reset(id){
            this.getById(id)
        }
        

    }
}
</script>

<style>

</style>